<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台管理系统</title>
    <link href="../static/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="../static/vendor/bootstrap-icons/bootstrap-icons.min.css" rel="stylesheet">
    <link href="../static/css/vui365.min.css" rel="stylesheet">
</head>

<body>
    <div id="app">
        <loading-panel :is-loading="isLoading"></loading-panel>
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="container-fluid">
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggler"
                    aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="navbar-brand">
                    <div class="position-relative">
                        <a href="index.html">后台管理系统</a>
                        <a href="version.html" target="_blank"
                            class="position-absolute top-0 start-100 translate-middle badge rounded-pill"
                            style="font-weight:normal;color:#AAA">
                            v0225
                        </a>
                        <a class="btn-toggle-aside ms-2" href="#" title="展开或收起内容">&equiv;</a>
                    </div>
                </div>
                <div class="collapse navbar-collapse justify-content-end skeleton" id="navbarToggler">
                    <ul class="navbar-nav mb-2 mb-lg-0">
                        <li class="nav-item">
                            <div class="dropdown">
                                <a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink"
                                    role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                    欢迎您 {{dataOfUser.user_name}}
                                </a>
                                <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                                    <li>
                                        <a class="dropdown-item" href="#" @click.prevent="onShowProfile()">个人资料</a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="#" @click.prevent="onLogout()">注销</a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">消息(0)</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <!-- /nav -->
        <div class="container-fluid">
            <div class="row">
                <aside class="col-lg-2 col-md-3 col-sm-12 p-0">
                    <div class="aside-menu skeleton">
                        <div class="accordion" id="asideMenuAcc">
                            <div class="accordion-item" v-for="(item, idx1) in dataOfMenus" :key="idx1">
                                <h2 class="accordion-header" :id="'asideMenuAccHeading' + idx1">
                                    <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                        :data-bs-target="'#asideMenuAccContent' + idx1" aria-expanded="true"
                                        :aria-controls="'asideMenuAccContent' + idx1">
                                        {{ item.text }}
                                    </button>
                                </h2>
                                <div :id="'asideMenuAccContent' + idx1" class="accordion-collapse collapse show"
                                    :aria-labelledby="'asideMenuAccHeading' + idx1">
                                    <div class="accordion-body p-0">
                                        <ul class="list-group list-group-flush">
                                            <li class="list-group-item" v-for="(item2, idx2) in item.children"
                                                :key="idx2">
                                                <a class="link-dark" :href="'/' + item2.link"
                                                    @click.prevent="onLinkTo(item2)">{{item2.text}}</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </aside>
                <!-- /aside -->
                <main class="layout-main col-lg-10 col-md-9 col-sm-12 d-flex flex-column">
                    <page-tabs ref="pageTabs" :store-name="adminHistoryMenu" :default-tab="defaultTab"
                        @change-tab="onChangeTab" @refresh-tab="onRefreshTab"></page-tabs>
                    <div class="flex-grow-1 skeleton">
                        <iframe ref="mainIframe" frameborder="0" allowfullscreen=""
                            style="width:100%;height:100%"></iframe>
                    </div>
                </main>
            </div>
        </div>
    </div>
    <script src="../static/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="../static/vendor/vue/vue.global.prod.min.js"></script>
    <script src="../static/vendor/axios/axios.min.js"></script>
    <script src="../static/js/vui365.min.js"></script>
    <script>
        // 全局配置
        myAxios = vui365.getMyAxios();

        // Api接口配置
        const UrlCfg = {
            menu: '/api/admin/menu',
            profile: '/api/admin/profile/{id}',
        }

        // 强制跳转到规范的路径，免得填坑麻烦。
        if(window.location.pathname.indexOf('.html') == -1){
            location.href='/admin/index.html';
            throw new Error("路径不规范");
        }
        const PageCfg = {
            main: 'index/main.html',
            profile: 'login/profile',
            login: 'login.html',
        }
        /**
         * 首页组件
         * @description 首页组件
         */
        const App = {
            // data 配置
            data() {
                return {
                    dataOfUser: {},
                    dataOfMenus: [],
                    defaultTab: { id: 0, link: PageCfg.main, text: '起始页' },
                    isLoading: false,
                };
            },
            // methods 配置
            methods: {
                /**
                 * 初始化页面数据
                 */
                async initData() {
                    this.isLoading = true;
                    await this.loadUserInfo();
                    await this.loadMenuData();
                    this.isLoading = false;
                },
                /**
                 * 初始化页面视图
                 */
                initView() {
                    // 移除骨架屏
                    document.querySelectorAll('.skeleton').forEach(el => {
                        el.classList.remove("skeleton");
                    })
                    // 侧边栏菜单整体显示和隐藏控制
                    document.querySelector(".btn-toggle-aside").addEventListener("click", function (evt) {
                        evt.preventDefault();
                        document.querySelector("aside").classList.toggle("d-none");
                    });
                    // 侧边栏菜单项目的显示和隐藏效果
                    document.querySelector("aside .aside-menu").addEventListener("click", function (evt) {
                        let elTarget = evt.target;
                        console.log(elTarget);
                        if (
                            elTarget.nodeName == "BUTTON" &&
                            elTarget.classList.contains("btn-toggle")
                        ) {
                            elTarget.setAttribute(
                                "aria-expanded",
                                !elTarget.getAttribute("aria-expanded")
                            );
                            elTarget.nextElementSibling.classList.toggle("show");
                            return;
                        }
                    });
                },
                /**
                 * 加载菜单数据
                 */
                async loadMenuData() {
                    if (!vui365.EsConfig.isLogin()) {
                        console.log('[index.html] loadMenuData() 未登录');
                        location.href = PageCfg.login
                        return;
                    }
                    const msgInfo = await vui365.stdAxios(UrlCfg.menu, {}, "POST");
                    console.log("加载菜单数据===", msgInfo);
                    if (msgInfo.status == 0) {
                        if (msgInfo.message.indexOf('Token') > -1) {
                            location.href = PageCfg.login
                        } else {
                            vui365.BsDialog.toast(msgInfo.message);
                        }
                        return;
                    }
                    this.dataOfMenus = msgInfo.data;
                },
                // 加载用户数据
                async loadUserInfo() {
                    const msgInfo = await vui365.stdAxios(UrlCfg.profile.replace('{id}', 0), {});
                    console.log("msgInfo=", msgInfo);
                    if (msgInfo.status == 0) {
                        vui365.BsDialog.alert(msgInfo.message);
                        return;
                    }
                    this.dataOfUser = msgInfo.data.data;
                },
                /**
                 * 注销登录
                 */
                onLogout() {
                    vui365.EsConfig.clearLoginInfo();
                    location.href = PageCfg.login;
                },
                /**
                 * 打开个人资料
                 */
                onShowProfile() {
                    this.onLinkTo({ id: 0, link: PageCfg.profile, text: '个人资料' });
                },
                onChangeTab(item) {
                    this.onHandleIframe('load', item.link);
                },
                onRefreshTab() {
                    this.onHandleIframe('refresh');
                },
                /**
                 * 打开菜单链接（创建标签页并加载页面）
                 */
                onLinkTo(item) {
                    let link = '/admin/' + item.link.replaceAll('_', '-') + '.html'
                    this.createTabMenu(link, item.text, item.id);
                    this.onHandleIframe('load', link);
                },
                onHandleIframe(type = 'reload', link = '') {
                    if (type == 'reload') {
                        this.$refs.mainIframe.contentWindow.location.reload(true);
                        return;
                    }
                    // 把 iframe 指向空白页面，这样可以释放大部分内存。
                    this.$refs.mainIframe.src = 'about:blank';
                    try {
                        this.$refs.contentWindow.document.write('');
                        this.$refs.contentWindow.document.clear();
                    } catch (e) { }
                    this.$refs.mainIframe.src = link;
                },
                // 创建标签页（不加载页面）
                createTabMenu(link, text, id) {
                    this.$refs.pageTabs.createTabMenu(link, text, id);
                },
                showLoading() {
                    console.log('showLoading');
                    this.isLoading = true;
                },
                hideLoading() {
                    console.log('hideLoading');
                    this.isLoading = false;
                }
            },
            // created 生命周期方法
            created() {
                this.initData();
            },
            // mounted 生命周期方法
            mounted() {
                this.initView();
                window.$showTabPage = this.createTabMenu;
                window.$showLoading = this.showLoading;
                window.$hideLoading = this.hideLoading;
            }
        }

        // 创建应用实例
        const app = Vue.createApp(App);
        //  注册组件
        app.component("PageTabs", vui365.getComponentOfPageTabs())
        app.component("LoadingPanel", vui365.getComponentOfLoadingPanel())
        // 加载根元素
        app.mount('#app');

        // 全局应用类
        class GlobalApp {
            // 全局快捷公开方法 - 刷新数据表格
            refreshDataTable() {
                document.querySelector("main iframe").contentWindow.refreshDataTable();
            }
            // 全局快捷公开方法 - 显示表单对话框
            formModal = '';
            showFormDialog(title, url, opener = null) {
                this.formModal = vui365.BsDialog.showFormDialogByIframe({ title: title, url: url, opener: opener })
            }
            // 全局快捷公开方法 - 关闭表单对话框
            closeFormDialog() {
                this.formModal.hide();
            }
            // 全局快捷公开方法 - 创建菜单标签
            showTabPage(text, url, id = 0) {
                if (id == 0) {
                    id = new Date().getTime();
                }
                window.$showTabPage(id, text, url);
            }
            showLoading() {
                window.$showLoading();
            }
            hideLoading() {
                window.$hideLoading();
            }
        }
        vui365.globalApp = new GlobalApp();
    </script>
</body>

</html>